﻿<div id="demo">

    <div class="row">
        <!-- Column -->
        <div class="col-lg-3 col-md-6">
            <div class="card">
                <div class="card-body">
                    <div class="d-flex flex-row">
                        <div class="round round-lg align-self-center round-danger"><i class="mdi mdi-bullseye"></i></div>
                        <div class="m-l-10 align-self-center">
                            <h3 class="m-b-0 font-lgiht">{{sup}}</h3>
                            <h5 class="text-muted m-b-0">入库供应商数</h5>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Column -->
        <!-- Column -->
        <div class="col-lg-3 col-md-6">
            <div class="card">
                <div class="card-body">
                    <div class="d-flex flex-row">
                        <div class="round round-lg align-self-center round-info"><i class="ti-wallet"></i></div>
                        <div class="m-l-10 align-self-center">
                            <h3 class="m-b-0 font-light">{{itemIn}}</h3>
                            <h5 class="text-muted m-b-0">入库品种数</h5>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Column -->
        <!-- Column -->
        <div class="col-lg-3 col-md-6">
            <div class="card">
                <div class="card-body">
                    <div class="d-flex flex-row">
                        <div class="round round-lg align-self-center round-primary"><i class="mdi mdi-cart-outline"></i></div>
                        <div class="m-l-10 align-self-center">
                            <h3 class="m-b-0 font-lgiht">{{cum}}</h3>
                            <h5 class="text-muted m-b-0">出库客户数</h5>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Column -->
        <!-- Column -->
        <div class="col-lg-3 col-md-6">
            <div class="card">
                <div class="card-body">
                    <div class="d-flex flex-row">
                        <div class="round round-lg align-self-center round-warning"><i class="mdi mdi-cellphone-link"></i></div>
                        <div class="m-l-10 align-self-center">
                            <h3 class="m-b-0 font-lgiht">{{itemOut}}</h3>
                            <h5 class="text-muted m-b-0">出库品种数</h5>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Column -->
    </div>


    <div class="row">
        <div class="col-lg-12">
            <div class="card">
                <div class="card-body">
                    <h4 class="card-title">本月出入库汇总表</h4>
                    <div class="table-responsive m-t-20">
                        <table class="table stylish-table">
                            <thead>
                                <tr>
                                    <th colspan="2">商品</th>
                                    <th>入库数</th>
                                    <th>出库数</th>
                                    <th>仓库</th>
                                    <th>库存数</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr v-for="x in UserList">
                                    <td style="width:50px;"><span class="round">{{x.TBC_NAME}}</span></td>
                                    <td>
                                        <h6>{{x.TBG_NAME}}</h6><small class="text-muted">{{x.TBG_SPEC}}/{{x.TBG_NUIT}}</small>
                                    </td>
                                    <td><span class="label label-success">{{x.IN_NUM}}</span></td>
                                    <td><span class="label label-info">{{x.OUT_NUM}}</span></td>
                                    <td>{{x.TBW_NAME}}</td>
                                    <td><span class="label label-primary">{{x.STOCK_NUM}}</span></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>


</div>

<script type="text/javascript">
    var vm = new Vue({
        el: "#demo",
        data: {
            UserList: [],
            itemIn: 0,
            itemOut: 0,
            sup: 0,
            cum: 0
        },
        mounted: function () {
            this.Query();
        },
        methods: {
            Query: function () {
                $(".preloader").fadeIn();//加载等待
                var _self = this;
                _self.UserList = [];
                $.post("../report/InOutSum?act=data",
                    function (data) {
                        data = JSON.parse(data);
                        for (var i = 0; i < data.data.length; i++) {
                            _self.UserList.push(data.data[i]);
                        }
                        _self.itemIn = data.data1[0].NUM;
                        _self.itemOut = data.data1[1].NUM;
                        _self.sup = data.data1[2].NUM;
                        _self.cum = data.data1[3].NUM;

                        $(".preloader").fadeOut();//取消加载等待
                    });
            }
        }
    });
</script>
